<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-date-picker
          v-model="startDate"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="endDate"
          type="date"
          placeholder="选择截止日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="showChart()">查询</el-button>
    </el-form>
    <div id="chart" class="chart" style="height:37rem;" />
  </div>
</template>

<script>
import {parseTime} from '@/utils'
import videoVisitorApi from '@/api/vid/video-visitor'
import * as echarts from 'echarts';
export default {
  name: "chart",
  data() {
    return {
      courseId: '',
      startDate: '',
      endDate: '',
      btnDisabled: false,
      echarsInst: null,
    }
  },
  created() {
    this.courseId = this.$route.params.id
    //初始化近七天的数据
    let currentDate = new Date()
    this.startDate = parseTime(currentDate.getTime() - 7*24*60*60*1000,'{y}-{m}-{d}')
    this.endDate = parseTime(currentDate.getTime(),'{y}-{m}-{d}')
    this.showChart()
  },
  methods: {
    showChart(){
      videoVisitorApi.findCount(this.courseId,this.startDate,this.endDate)
        .then(res => {
         this.setChartData(res.data)
      })
    },
    setChartData(data){
       //准备好dom，初始化echarts实例
      if (!this.echarsInst){
        this.echarsInst = echarts.init(document.getElementById('chart'))
      }
      // 指定图表的配置项和数据
       var option = {
        title: {
          text: '观看课程人数统计'
        },
        xAxis: {
          data: data.xData
        },
        yAxis: {
          minInterval: 1
        },
        series: [{
          type: 'bar',
          data: data.yData
        }]
      }
      this.echarsInst.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
